<style type="text/css">
    #febs-userScore .eleTree-node-content:hover, .eleTree-node-content.eleTree-node-content-active {
        background-color: #ffffff !important;
        color: #1890ff;
    !important;
    }
</style>
<style type="text/css">
    #febs-userScore .eleTree-node-content:hover, .eleTree-node-content.eleTree-node-content-active {
        background-color: #ffffff !important;
        color: #1890ff; !important;
    }
    #febs-userScore .padding-15 {
        padding: 15px;
    }
</style>
<div class="febs-container">
    <div class="febs-body layui-fluid" id="febs-userScore" lay-title="用户积分">
        <div class="layui-row layui-col-space15 febs-full" style="margin: 0px -7.5px">
            <div class="layui-col-md3 layui-col-sm3 layui-col-xs6 febs-full" style="padding: 0px 7.5px">
                <div class="layui-card febs-full" th:classappend="${hasHeadCompanyRole } ? '' : 'padding-15'">
                    <form class="layui-form layui-table-form" lay-filter="tenant-form" id="tenant-form" th:if="${hasHeadCompanyRole}">
                        <div class="layui-row" style="padding: 15px;">
                            <div class="layui-form-item">
                                <div class="layui-col-md10 layui-col-sm12 layui-col-xs12">

                                    <label class="layui-form-label layui-form-label-sm" style="width: auto !important;">公司名称</label>
                                    <div class="layui-input-block" style="margin-left: 90px;">
                                        <select name="tenantSelect" id="tenantSelect" lay-search="" >
                                            <option th:each="tenant:${tenantList}" th:value="${tenant.tenantId}"
                                                    th:text="${tenant.tenantName}"></option>
                                        </select>
                                    </div>
                                </div>
                                <div class="layui-col-md2 layui-col-sm12 layui-col-xs12">
                                    <div class="layui-btn layui-btn-primary table-action" style="margin-left: 5px;" id="queryTenantTree">
                                        <em class="layui-icon">&#xe848;</em>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                    <div class="eleTree deptTree" lay-filter="deptTree" style="margin-left: 1rem"></div>
                </div>
            </div>
            <div class="layui-col-md9 layui-col-sm9 layui-col-xs12 febs-full" style="padding: 0px 7.5px">
                <div class="layui-card febs-full">
                    <div class="layui-row" style="padding: 10px;">
                        <form class="layui-form layui-table-form" lay-filter="userScore-table-form">
                            <div class="febs-body-search">
                                <div class="layui-form-item">
                                    <div class="layui-inline">
                                        <label class="layui-form-label layui-form-label-sm">员工工号</label>
                                        <div class="layui-input-inline">
                                            <input type="text" name="userNo" autocomplete="off" class="layui-input">
                                            <input type="hidden" name="deptId" value="">
                                        </div>
                                    </div>
                                    <div class="layui-inline">
                                        <label class="layui-form-label layui-form-label-sm">员工账户</label>
                                        <div class="layui-input-inline">
                                            <input type="text" name="userName" autocomplete="off" class="layui-input">
                                        </div>
                                    </div>
                                    <div class="layui-inline">
                                        <label class="layui-form-label layui-form-label-sm">员工姓名</label>
                                        <div class="layui-input-inline">
                                            <input type="text" name="uname" autocomplete="off" class="layui-input">
                                        </div>
                                    </div>
                                    <div class="layui-inline">
                                        <label class="layui-form-label layui-form-label-sm">联系方式</label>
                                        <div class="layui-input-inline">
                                            <input type="text" name="mobile" autocomplete="off" class="layui-input">
                                        </div>
                                    </div>
                                    <div class="layui-inline">
                                        <label class="layui-form-label layui-form-label-sm">账户状态</label>
                                        <div class="layui-input-inline">
                                            <select name="status" lay-search="" >
                                                <option value="">请选择</option>
                                                <option value="0">禁用</option>
                                                <option value="1" selected>启用</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="layui-inline">
                                        <div id="query" class="layui-btn layui-btn-normal">
                                            <i class="layui-icon">&#xe615;</i> 查询
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                        <div class="febs-table-full" style="margin: 0px;padding: 0px;">
                            <table lay-filter="userScoreTable" lay-data="{id: 'userScoreTable'}"></table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script data-th-inline="javascript" type="text/javascript">
    layui.use(['dropdown', 'jquery', 'validate', 'laydate', 'eleTree', 'commonJS', 'form', 'table', 'febs'], function () {
        var $ = layui.jquery,
            laydate = layui.laydate,
            febs = layui.febs,
            form = layui.form,
            commonJS = layui.commonJS,
            table = layui.table,
            eleTree = layui.eleTree,
            _currentDeptData,
            $view = $('#febs-userScore'),
            $query = $view.find('#query'),
            $searchForm = $view.find('form'),
            $tenantSearchForm = $view.find('#tenant-form'),
            $queryTenantTree = $view.find('#queryTenantTree'),
            $resetTenantTree = $view.find('#resetTenantTree'),
            $tenantSelect = $tenantSearchForm.find('select[name="tenantSelect"]'),
            currentTenantId = [[${currentTenantId}]],
            hasHeadCompanyRole = [[${hasHeadCompanyRole}]],
            tableIns;



        form.render();
        //默认加载当前用户所属公司
        $tenantSelect.val(currentTenantId);
        form.render('select');

        initTable();


        function initTable() {
            tableIns = febs.table.init({
                elem: $view.find('table'),
                id: 'userScoreTable',
                url: ctx + 'user/list',
                height: getTableHeight(),
                skin: '',
                where: getQueryParams(),
                cols: [
                    [
                        {type: 'checkbox', width: 60, fixed: 'left'},
                        {title: '序号', type: 'numbers', width: 60},
                        {field: 'tenantName', title: '所属公司', minWidth: 180, hide: !hasHeadCompanyRole},
                        {field: 'userNo', align: 'center', title: '员工工号', width: 140},
                        {field: 'uname', title: '员工姓名', width: 140},
                        {field: 'deptName', title: '所属部门', minWidth: 160},
                        {
                            field: 'userType', title: '员工类型', width: 90, align: 'center',
                            templet: function (d) {
                                let returnText = "<span class='layui-badge febs-tag-gold'>未&nbsp;&nbsp;知</span>"
                                switch (d.userType) {
                                    case "1":
                                        returnText = "<span class='layui-badge febs-tag-cyan'>本&nbsp;&nbsp;工</span>"
                                        break;
                                    case "2":
                                        returnText = "<span class='layui-badge febs-tag-volcano'>外包工</span>"
                                        break;
                                    case "3":
                                        returnText = "<span class='layui-badge febs-tag-green'>外协工</span>"
                                        break;
                                }
                                return returnText
                            }
                        },
                        {field: 'status', title: '账户状态', align: 'center', width: 100,
                            templet: function (d) {
                                let returnText = "<span class='layui-badge febs-tag-gold'>未&nbsp;&nbsp;知</span>"
                                switch (d.status) {
                                    case "0":
                                        returnText = "<span class='layui-badge febs-tag-red'>禁用</span>"
                                        break;
                                    case "1":
                                        returnText = "<span class='layui-badge febs-tag-green'>启用</span>"
                                        break;
                                }
                                return returnText
                            }},
                        {field: 'totalScore', title: '用户积分', width: 120, align: 'center', sort: true, templet: function (d) {
                            let totalScore = d.totalScore ? d.totalScore : 0
                            return '<span style="color:#01aaed;cursor:pointer" shiro:hasPermission="userScoreDetail:view" lay-event="scoreDetail">' + totalScore + '</span>';
                            }},
                    ]
                ],
                autoSort:true
            });
        }

        laydate.render({
            elem: '#createTime',
            range: true,
            trigger: 'click'
        });

        table.on('tool(userScoreTable)', function (obj) {
            var data = obj.data,
                layEvent = obj.event;
            if (layEvent === 'scoreDetail') {
                febs.modal.open('用户积分明细', 'userScoreDetail', {
                    area: $(window).width() <= 750 ?  ['85%', '80%']: ['80%', '80%'],
                    data:{
                        tenantId: $tenantSelect.val(),
                        userId: data.userId
                    }
                });
            }
        });

        $query.on('click', function () {
            var params = $.extend(getQueryParams());
            tableIns.reload({where: params, page: {curr: 1}});
        });

        function tableReload() {
            $query.trigger('click');
        }

        function resetTableReload() {
            tableIns.reload({where: null, page: {curr: 1}});
        }

        renderMenuTree();

        $resetTenantTree.on('click', function () {
            $tenantSelect.val(currentTenantId);
            $searchForm.find("input[name='deptId']").val('-1');
            form.render('select');
            resetTableReload();
            renderMenuTree();
        });

        $queryTenantTree.on('click', function () {
            tableReload();
            renderMenuTree();
        });

        function renderMenuTree() {
            eleTree.render({
                elem: '.deptTree',
                url: ctx + 'dept/tree',
                where: {
                    "invalidate_ie_cache": new Date()
                },
                accordion: false,
                highlightCurrent: true,
                renderAfterExpand: false,
                expandOnClickNode: false,
                checkOnClickNode: true,
                spread: true,
                defaultExpandAll: true,
                request: {
                    name: 'name',
                    key: "id",
                    checked: "checked",
                    data: 'data'
                },
                response: {
                    statusName: "code",
                    statusCode: 200,
                    dataName: "data"
                },
                where: {
                    "tenantId": $tenantSelect.val(),
                    "invalidate_ie_cache": new Date()
                },
                done: function (data) {
                    _currentDeptData = undefined;
                    //console.log(data)
                }
            });

            //return _menuTree;
        }

        eleTree.on("nodeClick(deptTree)", function (d) {
            var data = d.data.currentData.data;
            if (data.deptId != undefined && data.deptId != '0') {
                _currentDeptData = data;
                form.val("userScore-table-form", {
                    "deptId": data.deptId
                });
                $query.click();
            }

        });

        function getQueryParams() {
            var createTimeFrom,
                createTimeTo,
                createTime = $searchForm.find('input[name="createTime"]').val();
            if (createTime) {
                createTimeFrom = createTime.split(' - ')[0];
                createTimeTo = createTime.split(' - ')[1];
            }
            return {
                createTimeFrom: createTimeFrom,
                createTimeTo: createTimeTo,
                userNo: $searchForm.find('input[name="userNo"]').val()?.trim(),
                userName: $searchForm.find('input[name="userName"]').val()?.trim(),
                uname: $searchForm.find('input[name="uname"]').val()?.trim(),
                mobile: $searchForm.find("input[name='mobile']").val()?.trim(),
                deptId: $searchForm.find("input[name='deptId']").val(),
                tenantId: $tenantSelect.val(),
                status: $searchForm.find('select[name="status"]').val(),
                invalidate_ie_cache: new Date()
            };
        }

        function getTableHeight() {
            return commonJS.calcTableHeight();
        }

        $(window).resize(function () {
            tableIns.reload({height: getTableHeight()});
        });
    })
</script>